import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import Button, { ButtonProps } from './index';

// 声明故事的所属模块和名称
export default {
  title: 'Components/Button',
  component: Button,
} as Meta;

// 使用的模板
const Template: Story<ButtonProps> = args => <Button {...args}>按钮</Button>;

// 分别定义不同得故事类型
export const Primary = Template.bind({});
Primary.args = {
  btnType: 'default',
  onClick: event => console.log(event),
};
Primary.storyName = '默认的 Button';

const DiffSizeButtonTemplate: Story<ButtonProps> = args => (
  <div>
    <p>不同尺寸的按钮</p>
    <Button {...args} size='lg' btnType='danger'>
      按钮
    </Button>
    <Button {...args} btnType='default'>
      按钮
    </Button>
    <Button {...args} size='sm' btnType='primary'>
      按钮
    </Button>
  </div>
);

// 分别定义不同得故事类型
export const DiffSizeButton = DiffSizeButtonTemplate.bind({});
DiffSizeButtonTemplate.args = {
  onClick: () => alert(0),
};
DiffSizeButton.storyName = '不同尺寸的 Button';
